<template>
  <div class="app-container">
    <div class="app-box" v-show="hteFile.id">
      <a-menu v-model="current" mode="horizontal" style="margin-bottom: 10px">
       
        <a-menu-item key="1" @click="changeTab('1')" style="width:20%"  > <a-icon type="read"/> 正文内容 </a-menu-item>
       
        <a-menu-item key="2" @click="changeTab('2')" style="width:20%"  > <a-icon type="menu-unfold" /> 关键信息</a-menu-item>
        <a-menu-item v-if="parentId==2" key="6" @click="changeTab('6')" style="width:20%" > <a-icon type="menu-unfold" /> 利用信息({{useTotal}})</a-menu-item>
        <!-- <a-menu-item key="3" @click="changeTab('3')"> <a-icon type="solution" /> 共享范围</a-menu-item> -->
        <a-menu-item key="4" @click="changeTab('4')" style="width:20%"> <a-icon type="paper-clip" /> 附件({{attachTotal}})</a-menu-item>
        <a-menu-item key="5" @click="changeTab('5')" style="width:20%"> <a-icon type="file-done"  /> 历史版本({{versionTotal}})</a-menu-item>
      </a-menu>
      
      <a-card v-if="activeTab == '1'" >
        <ViewFileContent ref="content" />
      </a-card>
      <a-card v-show="activeTab == '2'">
        <ViewLibFile ref="main" :parentId="parentId" />
      </a-card>
      <!-- <a-card v-show="activeTab == '3'">
        <ViewFilesRange ref="range" :fileId="hteFile.id" />
      </a-card> -->
      <a-card v-show="activeTab == '4'">
        <ViewLibFileAttach ref="attach" :hteFile="hteFile" @getTotal="(val)=>{ attachTotal = val }"/>
      </a-card>
      <a-card v-show="activeTab == '5'">
        <ViewLibFileHistory ref="history" :parentId="parentId" @getTotal="(val)=>{ versionTotal = val }"/>
      </a-card>
     <a-card v-show="activeTab == '6'">
        <ViewLibFilePolicyUse ref="policyUse" :fileId="fileId" :hteFile="hteFile"  @getTotal="(val)=>{useTotal = val}"/>
      </a-card>
      <div class="fixed-menu">
        <div v-if="hteFile.authority2 === 1 && hteFile.draftVersion === Number(version)" class="functionMould" style="background-color: #FFFFFF;" @click="handleEdit">
          <a-icon type="form" class="menu-icon"/>
          <span> 编辑文档</span>
        </div>
        <div v-if="hteFile.authority3 === 1 &&  !hteFile.content && !!downloadUrl"  class="functionMould" style="background-color:#FFFFFF" @click="handleDownload">
          <a-icon type="download" class="menu-icon"/>
          <span> 下载文件</span>
        </div>
        <div class="functionMould" style="background-color: #FFFFFF" @click="handleCollect">
          <a-icon type="codepen" class="menu-icon"/>
          <span>收藏文档</span>
        </div>
        <div class="functionMould" style="background-color: #FFFFFF" @click="handleUnCollect">
          <a-icon type="codepen" class="menu-icon"/>
          <span>取消收藏</span>
        </div>
        <div v-if="hteFile.authority5 === 1"  class="functionMould" style="background-color:#FFFFFF" @click="handleForward">
          <a-icon type="file-sync" class="menu-icon" />
          <span>文件分发</span>
        </div>
        <div v-if="hteFile.authority6 === 1"  class="functionMould" style="background-color:#FFFFFF">
          <FileShareForm :fileId="hteFile.id" type="icon"/>
          <span>分享</span>
        </div>
      </div>
    </div>

    <a-modal
      title="文件签收"
      :visible="signVisible"
      @ok="handleSign"
      @cancel="handleSignCancel"
      :width=800
      okText="确定签收"
    >
      <a-form-model ref="form" >
        <div class="layui-row" style="margin-top: 4px; height: 300px;">
          <div style="margin-left: 20px;">
            <p>1、本人在海芯平台的个人账号、密码由本人保管，在系统上的所有操作均为本人自愿操作，且对本次文件的签收操作予以认可，愿意承担该操作行为产生的一切法律效果。</p>
            <p>2、本人点击“确认签收”按钮，即视为本人已收到选择签收的文件，且对该签收行为承诺不可撤销。</p>
            <p>3、本人认可系统生成的文件签收时间作为签收文件送达本人的时间，且对该时间的真实性和有效性，本人没有异议。</p>
            <p>4、本人确认签收文件前已知悉签收文件的名称、类别、共享范围、查阅记录，历史版本等基本信息，并承诺在系统签收后２小时即视为本人已查阅、学习、知晓文件内容。</p>
            <p>5、本人同意本确认书内容，并通过个人账号在系统点击“确认签收”按钮的方式确定；一旦确定，本确认书即产生与本人签名相当的效力。</p>
            <p style="color: red">6、实际签收单号以确认签收后为准!</p>
          </div>
        </div>
      </a-form-model>
    </a-modal>
    <file-forward-modal ref="fileForwardModal" />
  </div>
</template>

<script>
import ViewFileContent from '@/views/library/components/ViewFileContent'
import ViewLibFile from '@/views/library/components/ViewLibFilePolicy'
import ViewLibFileAttach from '@/views/library/components/ViewLibFileAttach'
import { getAction, postAction } from '@/api/manage'
import ViewFilesRange from './components/ViewFilesRange'
import ViewLibFileHistory from './components/ViewLibFileHistory'
import FileForwardModal from './modules/FileForwardModal'
import ViewLibFilePolicyUse from './components/ViewLibFilePolicyUse'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  components: {
    ViewFileContent,
    ViewLibFile,
    ViewLibFileAttach,
    ViewFilesRange,
    ViewLibFileHistory,
    FileForwardModal,
    ViewLibFilePolicyUse,
    FileShareForm: () => import('@/views/library/components/FileShareForm')
  },
 props: {
    parentId: {
      type: Number,
      default: null
    },
    fileId: {
      type: Number,
      default: null
    },
    version: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      current: ['1'],
      activeTab: '1',
      classTree: [],
      classAttrList: [],
      hteFile: {},
      urls: {
        libFileGet: '/lib/hteLibFile/getLibFile',
        ifSign: '/lib/hteLibFile/ifSign/',
        sign: '/lib/hteLibLog/sign',
        collectOperate: '/lib/hteLibLog/collect',
        unCollectOperate: '/lib/hteLibLog/unCollect',
      },
     
      type: 0,
      signVisible:false,
      downloadUrl:'',
      viewUrl:'',
      attachTotal:0,
      versionTotal:0,
      useTotal:0,
    }
  },
  created() {
    if (this.$route.params.id) {
      this.type = 1
      this.fileId = this.$route.params.id;
      this.version = this.$route.params.v;
      const that = this
      getAction(this.urls.ifSign + this.fileId).then((res) => {
        if (res.success) {
          if(res.result === true){
            that.fetchHteFile()
          }else{
            //弹出签收
            that.signVisible = true
          }
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },
   watch: {
    '$route'(to, from) {
      // 在mounted函数执行的方法，放到该处
       if (this.$route.params.id) {
      this.type = 1
      this.fileId = this.$route.params.id;
      this.version = this.$route.params.v;
      const that = this
      getAction(this.urls.ifSign + this.fileId).then((res) => {
        if (res.success) {
          if(res.result === true){
            that.fetchHteFile()
          }else{
            //弹出签收
            that.signVisible = true
          }
        } else {
          this.$message.error(res.message)
        }
      })


    }
    }
  },
  updated(){
    let that = this
    if(this.activeTab==1){
         if( !!that.viewUrl){
        const content = '<iframe id="pdfDoc" src="' + that.viewUrl + '" width="100%;" height="100%" style="margin: 0 auto;border: medium none;"></iframe>'
        that.$refs.content.setContent(content)
        }else{
          that.$refs.content.setContent(that.hteFile.content)
        }
    }
 
    
  },
  methods: {
    initData(){
      
    },
    changeTab(tab) {
      this.activeTab = tab
      this.$forceUpdate();
    },
    fetchHteFile() {
      if (this.$route.path.startsWith('/library/file/view')) {
        const that = this
        
        getAction(this.urls.libFileGet,{fileId:this.fileId,version:this.version,type:this.type}).then((res) => {
          if (res.success) {
            let result = res.result
            that.hteFile = result
            that.version = result.version
            that.$refs.content.setContent(result.content)
            that.$refs.main.setMain(result)
            
            that.$refs.attach.listAttachment(result.id, result.version).then(attachs =>{
              
              if(attachs.length > 0) {
                const token = Vue.ls.get(ACCESS_TOKEN)
                if (!result.content) {
                  //默认显示第一个附件
                  let contentAttachs = attachs.find(item=>{return item.contentFlag == 1}) || attachs[0]
                  const url = process.env.VUE_APP_API_BASE_URL + '/lib/attach/preview?token=' + token + '&id=' + contentAttachs.attachId + '&ftpKey=ftp' + '&busKey=' + contentAttachs.fileId
                  let viewUrl = ''
                  if(that.hteFile.authority3 === 1  ){
                     viewUrl = process.env.BASE_URL+'/pdf/web/normalViewer.html?file=' + encodeURIComponent(url)
                  }else{
                     viewUrl = process.env.BASE_URL+'/pdf/web/viewer.html?file=' + encodeURIComponent(url)
                  }
                  this.viewUrl=viewUrl
                  const content = '<iframe id="pdfDoc" src="' + viewUrl + '" width="100%;" height="100%" style="margin: 0 auto;border: medium none;"></iframe>'
                  that.$refs.content.setContent(content)
                  that.downloadUrl =  process.env.VUE_APP_API_BASE_URL + '/lib/attach/download?token=' + token + '&id=' + contentAttachs.attachId + '&ftpKey=ftp'  + '&busKey=' + contentAttachs.fileId 

                }
              }
            })
            that.$refs.history.fetchHistories(result.id);
            let activeTab=this.$route.query.activeTab;
            if(activeTab){
              this.activeTab=this.$route.query.activeTab;
              this.current=[this.activeTab];
            }
          } else {
            that.$message.error(res.message)
          }
        })
      }
    },
    handleSign(){
      const that = this
      postAction(this.urls.sign +"?fileId=" + this.fileId).then((res) => {
        if (res.success) {
          that.$message.success("签收成功")
          that.fetchHteFile()
          that.signVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSignCancel(){
      this.signVisible = false
      window.CloseCefTab ? window.CloseCefTab():window.close()
     
    },
    handleEdit(){
      let urlJump = this.$router.resolve({ path: '/library/file/edit/' + this.parentId + '/' + this.fileId + '/' + this.version })
      window.open(urlJump.href, '_blank')
    },
    handleForward(){
      this.$refs.fileForwardModal.show(this.fileId)
    },
    handleCollect() {
      const that = this
      getAction(this.urls.collectOperate, { fileIds: this.fileId }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleUnCollect() {
      const that = this
     
        this.$confirm({
        title: '确定取消收藏文档？',
        onOk() {
            getAction(that.urls.unCollectOperate, { fileIds: that.fileId }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.fetchFileList();
        } else {
          that.$message.warning(res.message)
        }
       })
        }
        })
    },
    handleDownload(){
      window.open(this.downloadUrl)
    }
  },
}
</script>

<style scoped>
  #app{
    background-color: #f5f5f5!important;
  }
.app-container {
  position: relative;
  background-color: #f5f5f5;
  width: 100%;
  min-width: 1200px;
  height: 100%;
  justify-content: center;
  padding-top: 30px;
      padding-bottom: 0px;
}
.botton-bar {
  position: fixed;
  bottom: 0;
  z-index: 9;
  width:calc(100% - 194px);
}
.app-box {
  width:calc(100% - 194px);
  height:100%;
  min-width: 1200px;
  margin:0 auto;
  position: relative;
}
.fixed-menu {
  position: absolute;
  top:48px;
  right: 0vw;
  z-index: 10000;
  width:80px;
  right: -95px;
 
}
 .fixed-menu span{
  font-size: 12px;
  }
.functionMould {
  background-color: #ffffff;
  height: 80px;
  padding-top: 18px;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.functionMould > span {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
  display: block;
}
.menu-icon {
  font-size: 24px;
  color: #31a0e1;
}
.ant-menu-item {
  border: 1px solid #31a0e13d !important;
  padding: 0 0px;
  /*width: 20%;*/
  text-align: center;
}
.ant-menu-item-selected {
  color: #ffffff !important;
  background: #31a0e1 !important;
}
</style>

<style scoped lang="less">

 /deep/ .app-box .ant-card{
      height: calc(100% - 68px );
    overflow-y: auto;
}
 /deep/ .app-box .ant-card .ant-card-body{
      height: 100%;
    
}
</style>